<template>
	<view class="content">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
		<view class="activeSign">
			<view class="title">{{ activity.activityName }}</view>
			<view class="active-changci">
				<view class="massClass" v-if="from !== 'personal' && activity.activityForm == '00'">
					活动场次：
					<text style="color: rgba(102, 100, 92, 0.5);">{{ activity.activityFrequency }}</text>
					<text class="tip">(报名活动请先选择场次)</text>
				</view>

				<radio-group @change="radioChange" class="active-list-item">
					<label class="uni-list-cell uni-list-cell-pd checkList" v-for="(item, index) in timeAddressList" :key="index">
						<view class="check">
							<radio
								v-if="showCheckbox(item)"
								:value="String(index)"
								:checked="index === current"
								color="#FACC6B"
								style="transform: scale(0.8)"
							/>
							<radio v-else disabled style="transform: scale(0.8); opacity: 0.2;"></radio>
						</view>
						<view>
							<view class="list-item-time" v-if="from !== 'personal' && activity.activityForm == '00'">
								<image
									class="imageClass timeIcon"
									src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/time.png"
								></image>
								<view class="time-label">报名时间：</view>
								<view class="time" style="margin-left: 0;">
									<view>{{ item.signUpStartTime | formatDate }} 至</view>
									<view>{{ item.signUpEndTime | formatDate }}</view>
								</view>
							</view>
							<view class="list-item-time" v-if="item.activityAddress">
								<image
									class="imageClass"
									src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/address.png"
									style="width: 26rpx;"
								></image>
								<view class="time-label">活动地点：</view>
								<view class="time" style="margin-left: 0;">{{ item.activityAddress }}</view>
							</view>

							<view class="list-item-time" v-if="item.showSignUpNum == '00'">
								<image
									class="imageClass"
									src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/address.png"
									style="width: 26rpx;"
								></image>
								<view class="time-label">报名人数：</view>
								<view class="time" style="margin-left: 0;">{{ item.signUpTotalQuantity }}/{{ item.totalQuantity }}</view>
							</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view style="margin:40rpx;">
			<image :src="activity.activityPic" style="border-radius: 12rpx;width:100%; height: 250rpx;" mode="aspectFill"></image>
		</view>

		<view style="margin: 0 40rpx;padding-bottom: 60rpx;"><rich-text :nodes="activity.activityInfo"></rich-text></view>

		<view v-if="btn"><button @click="detail" style="width: 260rpx;background: #facc6b;height: 82rpx;font-size: 34rpx;">查看详情</button></view>

		<view class="attention">
			<view @click="handleClick(activity)">
				<image class="editeImage" :src="thumbsImgHeart" v-if="activity.isLike == '2'" />
				<image class="editeImage" :src="thumbsImgYellow" v-else />
			</view>
			<text class="attentionText">{{ activity.likeNum }}</text>
		</view>

		<view class="infoTop" v-if="from !== 'personal' && activity.activityForm == '00'">
			<view class="infoButton" style="position: relative">
				<button class="infoButtonClick btnLeft" @click="comment(activity.activityId, '')">点评</button>
				<view class="line" v-if="!signUpDisabled"></view>
				<button :disabled="signUpDisabled" class="infoButtonClick btnRight" @click="forbid(activity.activityId)">{{ signUpText }}</button>
			</view>
		</view>

		<view class="subTitle" v-if="commentList.length"><text>热门评论</text></view>
		<view class="commentList" v-for="(item, index) in commentList" :key="index">
			<view class="headImg"><image :src="item.avatar" mode="aspectFill" /></view>
			<view class="commentInfo">
				<view class="name">
					<text>{{ item.userName }}</text>
					<img :src="chart" @click="handleText(item)" style="width:30rpx; height: 30rpx;" />
					<view class="img" @click.stop="zan(item)">
						<img v-if="item.isLike == '1'" :src="zanFill" />
						<img v-else :src="zanEmpty" />
						<text>{{ item.likeNum }}</text>
					</view>
				</view>
				<view class="content">{{ item.replyComment }}</view>
				<view class="chatList_img">
					<view v-if="item.imgUrls.length === 1" style="width: 320rpx;margin-bottom: 22rpx;" @click="viewImages(item.imgUrls, i)">
						<auto-image :src="item.imgUrls[0]"></auto-image>
					</view>
					<image
						v-else
						@click="viewImages(item.imgUrls, i)"
						:src="itemImg"
						v-for="(itemImg, i) in item.imgUrls"
						:key="i"
						mode="aspectFill"
					/>
				</view>
				<view class="list" v-for="(_item, i) in item.childReply" :key="i">
					<view class="listHead">
						<text class="author">{{ _item.userName }}</text>
						<view class="img" @click.stop="zan(_item)">
							<img v-if="_item.isLike == '1'" :src="zanFill" />
							<img v-else :src="zanEmpty" />
							<text>{{ _item.likeNum }}</text>
						</view>
					</view>
					<view class="commentContent">{{ _item.replyComment }}</view>
				</view>
			</view>
		</view>
		<mix-load-more :status="loading"></mix-load-more>

		<uni-popup ref="popupText" type="center" class="wrapText">
			<view class="chat">
				<view class="textarea">
					<textarea
						class="uni-textarea"
						v-model="reportDesc"
						placeholder="快来发表您的独到见解吧"
						placeholder-class="place-holder"
						maxlength="200"
					></textarea>
				</view>
				<view class="button_userkeeper_bottom">
					<button class="btn btnText" @click.stop="tj()" :disabled="chatDisabled">提交评论</button>
				</view>
			</view>
			<text @click="closeW" class="wrap_close"></text>
		</uni-popup>

		<uni-popup-slient ref="slient" :endTime="endTime"></uni-popup-slient>
		<uni-popup ref="popup" type="center" class="wrap" v-if="from !== 'personal'">
			<view class="chat">
				<view class="input">
					<view class="item">
						<view class="label">
							<text>姓</text>
							<text>名</text>
						</view>
						<input
							class="uni-input"
							name="input"
							placeholder-style="color: #AEADAA"
							v-model="name"
							placeholder="请输入姓名"
							maxlength="20"
						/>
					</view>
					<view class="item">
						<view class="label">
							<text>手</text>
							<text>机</text>
							<text>号</text>
						</view>
						<input
							class="uni-input"
							name="input"
							placeholder-style="color: #AEADAA"
							v-model="phone"
							maxlength="11"
							placeholder="请输入手机号"
							type="number"
						/>
					</view>
				</view>
				<button class="btn baseBtn" @click.stop="add()" style="background: #fff;color: rgba(102, 100, 93, 1);font-size: 30rpx;">提交</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import http from '../../common/request.js';
import carousel from '@/components/uni-carousel/uni-carousel-task';
import uniPopup from '@/components/uni-popup/uni-popup-reporat.vue';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import { getCommonShareInfo } from '@/common/utils.js';
import AutoImage from '../../components/uni-image/uni-auto-image.vue';
import uniPopupSlient from '@/components/uni-popup/uni-popup-dialog-silent.vue';
export default {
	onLoad(option) {
		this.id = option.activityId;
		this.from = option.from;
	},
	components: {
		uniPopupSlient,
		carousel,
		uniPopup,
		mixLoadMore,
		popupActive,
		AutoImage
	},
	mounted() {
		this.activeList();
		this.record();
	},
	onReachBottom() {
		if (this.loading != 2) {
			this.record();
		}
	},
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			id: '',
			from: '',
			activity: {},
			current: '',
			timeAddressList: [],
			name: '',
			phone: undefined,
			sessionId: '',
			activityId: '',
			individualQuantity: 0,
			popScreenList: [],
			showHonor: false,
			signUpDisabled: true,
			signUpText: '报名',
			btn: false,
			url: '',
			isLike: 1,
			// zan: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/zan.png',
			// clickZan: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/fouceZan.png',
			chart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/message.png',
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_empty.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png',
			zanFill: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/zan-fill.png',
			zanEmpty: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/zan-empty.png',
			likeNum: 0,
			commentList: [],
			pageNum: 1,
			loading: 0,
			allowRequest: true,
			reportDesc: '',
			textData: {},
			chatDisabled: false,
			endTime: ''
		};
	},
	filters: {
		formatStartDate(date) {
			return date ? date.split('至')[0] + '至' : '';
		},
		formatEndDate(date) {
			return date ? date.split('至')[1] : '';
		},
		formatDate(timestamp) {
			const date = new Date(timestamp);
			const str1 = [
				date.getFullYear(),
				date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1),
				date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
			];
			const str2 = [
				date.getHours() >= 10 ? date.getHours() : '0' + date.getHours(),
				date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
			];
			return str1.join('-') + ' ' + str2.join(':');
		}
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo }),
		showCheckbox() {
			return item => {
				const { from, activity } = this;
				if (activity.timeAddressList.length === 1 && activity.activityStatus == '05') {
					return false;
				}
				const status = from !== 'personal' && activity.activityForm == '00';
				if (status === false) {
					return status;
				}
				const now = Date.now();
				if (item.signUpStartTime <= now && item.signUpEndTime >= now) {
					if (this.getIfFull(item)) {
						return false;
					}
					return true;
				} else {
					return false;
				}
				return true;
			};
		}
	},
	methods: {
		handleText(data) {
			http('/api/cusUserInfo/getUserStatus/' + this.userInfo.userId, { data: {}, method: 'GET' }).then(result => {
				if (result.code == '200') {
					//  0 正常 1 禁言 2 停用
					if (!result.data) {
						this.textData = data;
						this.$refs.popupText.open();
					} else {
						this.$refs.slient.open();
						this.endTime = result.forbiddenDate;
					}
				}
			});
		},
		closeW() {
			this.$refs.popupText.close();
		},
		tj() {
			this.chatDisabled = true;
			if (this.reportDesc == '') {
				this.chatDisabled = false;
				uni.showToast({
					title: '请填写评论内容',
					icon: 'none'
				});
				return;
			}
			http('/api/sysActivityReply/activityReply', {
				data: {
					activityId: this.textData.activityId,
					replyComment: this.reportDesc,
					parentId: this.textData.activityReplyId || 0
				},
				method: 'POST'
			}).then(result => {
				if (result.code == '200') {
					// this.disabled = false;
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					});
					this.chatDisabled = false;
					this.textData.childReply = this.textData.childReply || [];
					this.textData.childReply.push({
						userName: this.userInfo.nickName,
						isLike: '0',
						likeNum: '0',
						replyComment: this.reportDesc,
						activityReplyId: result.data.activityReplyId
					});
					this.reportDesc = '';
					this.$refs.popupText.close();
					const list = result.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		},
		toPage(value) {
			http('/api/duiba/getNoLoginUrl?credits=0&redirect=' + value, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = result.data;
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../../home/web_view?url=' + encodeURIComponent(result.data),
						animationType: 'pop-in',
						animationDuration: 200
					});
					// #endif
				}
			});
		},
		handleClick(item) {
			let url = '';
			if (item.isLike == '2') {
				url = 'api/activity/dataIncr'; // 点赞
			} else {
				url = 'api/activity/dataDecr'; // 取消点赞
			}
			http(url, {
				method: 'post',
				data: {
					activityId: item.activityId
				}
			}).then(result => {
				if (result.code === 200) {
					const data = result.data || {};
					// #ifdef MP-WEIXIN
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.$vm.updateActive(data.count, data.isLike);
					//#endif
					item.likeNum = data.count || 0;
					item.isLike = data.isLike;
					const list = result.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		},
		viewImages(urls, index) {
			uni.previewImage({
				urls,
				current: index,
				indicator: true
			});
		},
		zan(item) {
			let url = '';
			if (item.isLike == '2') {
				url = '/api/sysActivityReply/dataIncr'; // 点赞
			} else {
				url = '/api/sysActivityReply/dataDecr'; // 取消点赞
			}
			http(url, {
				method: 'post',
				data: {
					activityReplyId: item.activityReplyId
				}
			}).then(result => {
				if (result.code === 200) {
					const data = result.data || {};
					item.likeNum = data.count || 0;
					item.isLike = data.likeType;

					const list = data.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		},
		delete(id) {
			//删除评论
			http('/api/sysActivityReply', {
				data: {
					id: id
				},
				method: 'DELETE'
			}).then(result => {
				if (result.code == 200) {
					this.record();
				}
			});
		},
		validateAllowSignUp(list) {
			const now = Date.now();
			let start = 0,
				end = 0,
				min = 0,
				max = 0;
			for (let item of list) {
				const { signUpStartTime, signUpEndTime } = item;
				min = min < signUpStartTime ? min : signUpStartTime;
				max = max < signUpEndTime ? max : signUpEndTime;
				if (now >= signUpStartTime && now <= signUpEndTime) {
					this.signUpDisabled = false;
					this.signUpText = '报名';
					break;
				} else if (now < signUpStartTime) {
					start++;
				} else if (now > signUpEndTime) {
					end++;
				}
			}
			this.signUpDisabled = true;
			if (start === list.length) {
				this.signUpText = '报名未开始';
				return 'stop';
			} else if (end === list.length) {
				this.signUpText = '报名已结束';
				return 'stop';
			} else {
				if (now <= max && now >= min) {
					this.signUpDisabled = false;
				}
				this.signUpText = '报名';
			}
		},
		activeList() {
			http('/api/activity/appActivityDetail', {
				method: 'GET',
				data: {
					activityId: this.id
				}
			}).then(result => {
				if (result.data === null) {
					uni.showModal({
						title: '',
						content: result.msg,
						showCancel: false,
						confirmColor: '#66645D',
						success() {
							uni.navigateBack({
								delta: 1,
								animationDuration: 200,
								animationType: 'pop-out'
							});
						}
					});
					return;
				}
				this.activity = result.data || {};
				let richtext = this.activity.activityInfo || '';
				let regex = new RegExp('<img', 'gi');
				richtext = richtext.replace(regex, `<img style="width: 100%!important;height: auto!important;"`);
				this.activity.activityInfo = richtext;

				this.timeAddressList = this.activity.timeAddressList || [];
				if (result.data.contentIsLink != undefined && result.data.contentIsLink != '00') {
					this.btn = true;
					this.url = result.data.activityInfo;
				}
				const now = Date.now();
				const { activityStartTime, activityEndTime, activitySignUpStartTime, activitySignUpEndTime } = this.activity;

				// if (activitySignUpStartTime > now) {
				// 	this.signUpDisabled = true;
				// 	this.signUpText = '报名未开始';
				// 	return;
				// }
				// if (activitySignUpEndTime < now) {
				// 	this.signUpDisabled = true;
				// 	this.signUpText = '报名已结束';
				// 	return;
				// }
				const r = this.validateAllowSignUp(this.timeAddressList);
				if (r === 'stop') {
					return;
				}

				if (this.activity.activityStatus == '05' && this.activity.timeAddressList.length === 1) {
					this.signUpDisabled = true;
					this.signUpText = '您已报名该活动';
					return;
				}

				if (this.timeAddressList.length === 1) {
					//只有一条时校验报名已满
					if (this.getIfFull(this.timeAddressList[0])) {
						this.signUpDisabled = true;
						this.signUpText = '报名人数已满';
						return;
					}
				}

				// if (activityStartTime > now) {
				// 	this.signUpDisabled = true;
				// 	this.signUpText = '活动未开始';
				// 	return;
				// }
				if (activityEndTime < now) {
					this.signUpDisabled = true;
					this.signUpText = '活动已结束';
					return;
				}

				// this.signUpDisabled = false;
			});
		},
		detail() {
			// #ifdef MP-WEIXIN
			uni.navigateTo({
				url: '../../home/web_view?url=' + encodeURIComponent(),
				animationType: 'pop-in',
				animationDuration: 200
			});
			// #endif
			// #ifdef H5
			location.href = this.url;
			// #endif
		},
		getIfFull(item) {
			return item.signUpTotalQuantity && item.totalQuantity && item.signUpTotalQuantity === item.totalQuantity;
		},
		radioChange(evt) {
			const index = evt.detail.value;
			const activity = this.timeAddressList[index];
			if (this.getIfFull(activity)) {
				this.signUpDisabled = true;
				this.signUpText = '报名人数已满';
				return;
			}

			this.signUpText = '报名';
			const now = Date.now();
			if (activity.signUpStartTime <= now && activity.signUpEndTime >= now) {
				this.sessionId = activity.sessionId;
				this.signUpDisabled = false;
				this.individualQuantity = activity.individualQuantity || 0;
			} else {
				this.signUpDisabled = true;
				// if (activity.signUpStartTime > now) {
				// 	this.signUpText = '报名未开始';
				// } else if (activity.signUpEndTime < now) {
				// 	this.signUpText = '报名已结束';
				// }
			}
		},
		forbid(data) {
			if (!this.sessionId) {
				uni.showToast({
					title: '请先选择报名场次',
					icon: 'none'
				});
				return;
			}
			this.activityId = data;
			// this.$refs.popup.open();

			//this.eventChannel.emit('queryDetail', true);
			// uni.navigateBack({
			// 	delta: 2,
			// 	animationType: 'pop-out',
			// 	animationDuration: 200
			// });
			uni.navigateTo({
				url: '/activity/info/signUp?sessionId=' + this.sessionId + '&activityId=' + this.activityId + '&limit=' + this.individualQuantity,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		comment(data, parentId) {
			http('/api/cusUserInfo/getUserStatus/' + this.userInfo.userId, { data: {}, method: 'GET' }).then(result => {
				if (result.code == '200') {
					//  0 正常 1 禁言 2 停用
					if (!result.data) {
						uni.navigateTo({
							url: '/activity/info/comment?activeId=' + data + '&parentId=' + parentId,
							animationType: 'pop-in',
							animationDuration: 200,
							events: {
								queryDetail: flag => {
									this.record(flag);
								}
							}
						});
					} else {
						this.$refs.slient.open();
						this.endTime = result.forbiddenDate;
					}
				}
			});
		},
		record(tag) {
			// 评论列表
			if (tag) {
				this.pageNum = 1;
			}
			this.loading = 1;
			http('/api/sysActivityReply/pageList', {
				data: {
					pageNum: this.pageNum,
					pageSize: '10',
					baseEntity: {
						activityId: this.id
					}
				},
				method: 'POST'
			}).then(result => {
				if (result.code == 200) {
					let data = result.rows || [];
					if (tag) {
						this.commentList = data; //进行数据的累加
					} else {
						this.commentList = this.commentList.concat(data); //进行数据的累加
					}

					if (data.length < result.total) {
						this.pageNum++; //页数的++
						this.loading = 0;
					} else {
						this.loading = 2;
					}
					this.loading = this.commentList.length == 0 ? 10 : this.loading;
				} else {
					this.loading = 0;
				}
			});
		},

		reset() {
			//重置查询第一页
			this.pageNum = 1;
			this.allowRequest = true;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			this.commentList = [];
		},
		add() {
			if (!this.phone) {
				uni.showToast({
					title: '请填写手机号码',
					icon: 'none'
				});
				return;
			}
			if (!/^1[0-9]{10,10}$/.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号！',
					icon: 'none'
				});
				return;
			}
			if (!this.name) {
				uni.showToast({
					title: '请填写用户名',
					icon: 'none'
				});
				return;
			}

			http('/api/activity/signUp', {
				data: {
					sessionId: this.sessionId, // 场次id
					activityId: this.activityId, // 活动id
					name: this.name,
					mobile: this.phone
				},
				method: 'POST'
			}).then(
				result => {
					this.$refs.popup.close();
					if (result.code == 200) {
						uni.showToast({
							title: '活动报名成功',
							icon: 'none'
						});
						setTimeout(() => {
							const list = result.popScreen || [];
							if (list.length > 0) {
								this.showHonor = true;
								this.popScreenList = list;
							}
						}, 1000);
					}
				},
				result => {
					this.$refs.popup.close();
				}
			);
		}
	}
};
</script>

<style scoped lang="less">
/deep/radio .wx-radio-input.wx-radio-input-checked::before {
	color: #66645d !important;
	font-weight: 500 !important;
}
.wrap_close {
	position: absolute;
	bottom: -108rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 70rpx;
	height: 70rpx;
	border: solid 2rpx #fff;
	border-radius: 50%;
	&::before {
		content: '';
		position: absolute;
		top: 33rpx;
		left: 19rpx;
		width: 30rpx;
		height: 4rpx;
		background-color: #fff;
		transform: rotate(45deg);
		border-radius: 4rpx;
	}
	&::after {
		content: '';
		position: absolute;
		top: 33rpx;
		left: 19rpx;
		width: 30rpx;
		height: 4rpx;
		background-color: #fff;
		transform: rotate(-45deg);
		border-radius: 4rpx;
	}
}

.wrapText {
	// position: relative;
	width: 100%;
	.chat {
		width: 680rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 40rpx;
		.textarea {
			border: 2rpx solid rgba(151, 151, 151, 0.4);
			text-align: left;
			padding: 20rpx;
			margin-bottom: 40rpx;
			height: 400rpx;
			width: 100%%;
			color: #8a8c8d;
			font-weight: 300;
			border-radius: 12rpx;
			.uni-textarea {
				width: calc(100% - 40rpx);
				height: calc(100% - 40rpx);
				line-height: 46rpx;
				font-size: 28rpx;
				font-weight: 300;
				color: #66645d;
			}
		}
		.button_userkeeper_bottom {
			// margin-top: 60rpx;
			.btnText {
				border-radius: 12rpx;
				background: #facc6b;
				color: #66645d;
				font-size: 30rpx;
				height: 82rpx;
				margin-top: 30rpx;
				line-height: 82rpx;
			}
		}
	}

	.share {
		width: 90%;
		position: relative;
		top: 10%;
		margin-left: 5%;
		background: #fff;
		border-radius: 12rpx;
		height: 85%;
		.title {
			font-size: 36rpx;
			padding: 36rpx 160rpx;
			color: #66645d;
			display: flex;
			justify-content: center;
		}
		.data {
			text-align: left;
			.month {
				font-size: 62rpx;
				color: #66645d;
			}
			.year {
				font-size: 28rpx;
				color: #66645d;
			}
		}
		.compony {
			font-size: 30rpx;
			color: #f29700;
		}
		.btn {
			display: flex;
			align-items: center;
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100%;
			button {
				width: 100%;
				color: #66645d;
				font-size: 30rpx;
				height: 90rpx;
				border-radius: 0rpx;
				line-height: 90rpx;
			}
		}
	}
}
.attention {
	display: flex;
	justify-content: flex-end;
	padding: 16rpx 40rpx 0 0;
	color: rgba(178, 177, 174, 1);
	align-items: center;

	image {
		width: 30rpx !important;
		height: 30rpx !important;
		// margin-bottom: 0rpx;
		// margin-right: 10rpx;
		// margin-left: 30rpx;
		margin: 0rpx 10rpx 34rpx 100rpx;
	}
	text {
		margin-bottom: 34rpx;
	}
}
.activeSign {
	margin: 24rpx 40rpx;
	border-radius: 12rpx;
	.title {
		line-height: 45rpx;
		color: #66645d;
		font-size: 32rpx;
		padding-bottom: 23rpx;
		background: #f7f7f7;
	}
	.active-changci {
		background-color: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
	}
	.massClass {
		padding: 23rpx 20rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #66645d;
		line-height: 42rpx;
		.tip {
			font-size: 24rpx;
			color: #f39800;
			margin-left: 48rpx;
		}
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			bottom: 0;
			height: 2rpx;
			background-color: rgba(102, 100, 93, 0.1);
		}
	}
	.active-list-item {
		padding: 0 24rpx;
		background: #fff;
	}
}
.chat {
	width: 670rpx;
	background: #fff;
	border-radius: 12rpx;
	min-height: 360rpx;
	position: relative;
	overflow: hidden;
	.input {
		padding: 40rpx 86rpx 60rpx 40rpx;
		background: #f7f7f7;

		.item {
			display: flex;
			align-items: center;
			// margin-bottom: 44rpx;
			padding: 20rpx 0 12rpx 0;
			.label {
				width: 120rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #66645d;
				line-height: 42rpx;
				// margin-right: 24rpx;
				display: flex;
				justify-content: space-between;
			}
			.uni-input {
				width: 400rpx;
				height: 60rpx;
				background: #f7f7f7;
				border-radius: 12rpx;
				margin: 0;
				font-size: 26rpx;
				padding-left: 12rpx;
				margin-left: 24rpx;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
.checkList {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: rgba(102, 100, 93, 0.5);
	border-bottom: 1px solid rgba(102, 100, 93, 0.1);
	padding: 24rpx 0;
}
.checkList:last-child {
	border-bottom: 1px solid #fff;
}
.time {
	margin-left: 12rpx;
	line-height: 40rpx;
}

.title {
	line-height: 100rpx;
	font-size: 36rpx;
}
.c-title {
	line-height: 100rpx;
	font-size: 26rpx;
}
.activityimg {
	width: 100%;
	margin-top: 10rpx;
}

.attention {
	display: flex;
	justify-content: flex-end;
	padding: 0 40rpx 0;
	color: rgba(178, 177, 174, 1);
	align-items: center;

	// cursor: pointer;
}

.attentionText {
	// margin-left: 14rpx;
	font-size: 24rpx;
}

.infoButton {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 34px;
	font-weight: 400;
	color: rgba(102, 100, 93, 1);
}

.infoButton navigator {
	flex: 1;
}

.infoButton button {
	flex: 1;
	background: rgba(250, 204, 107, 1);
	border-radius: 12rpx;
}
.infoButton :first-child {
	border-radius: 12rpx 0 0 12rpx;
}
.infoButton :last-child {
	border-radius: 0 12rpx 12rpx 0;
}
.infoButton button::after {
	border: 0;
	color: rgba(102, 100, 93, 1);
}

.commentTitle {
	height: 94rpx;
	line-height: 94rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	font-weight: 500;
	align-items: center;
	border-bottom: 1px solid rgba(102, 100, 93, 0.1);
	padding: 0 40rpx;
}

.commentTitle h3 {
	font-size: 32rpx;
}

.commentBox {
	padding: 0 40rpx 40rpx;
}

.infoButtonLine {
	font-weight: lighter;
	font-size: 48rpx;
	color: rgba(102, 100, 93, 0.5);
}

.commentLi {
	background: rgba(255, 255, 255, 1);
	border-radius: 12rpx;
	margin-top: 24rpx;
	padding: 20rpx;
}

.commentFirst {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.commentFirst image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50px;
}

.commentFirst h3 {
	flex: 1;
	font-size: 30rpx;
	font-weight: 400;
	color: rgba(102, 100, 93, 1);
	padding-left: 24rpx;
	line-height: 46rpx;
}

.commentIcon {
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(178, 177, 174, 1);
	display: flex;
	justify-content: flex-start;
	margin-left: 20rpx;
}

.commentIcon image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 12rpx;
}

.commentSecond {
	font-size: 28rpx;
	font-weight: 300;
	color: rgba(138, 140, 141, 1);
	padding-left: 14rpx;
	margin: 36rpx 0;
	line-height: 46rpx;
}

.commentThired {
	border-left: 1px solid rgba(138, 140, 141, 1);
	margin-bottom: 23rpx;
}

.commentThiredInfo {
	margin-top: 12rpx;
	line-height: 46rpx;
	padding-left: 20rpx;
	color: rgba(178, 177, 174, 1);
	font-size: 28rpx;
}

.infoTop {
	padding: 24rpx 40rpx;
	// position: fixed;
	// bottom: 0;
	// left: 0;
	// right: 0;
	background-color: #ffffff;
}
.infoButtonClick {
	height: 82rpx;
	width: 100%;
	background: rgba(250, 204, 107, 1);
	line-height: 82rpx;
	text-align: center;
	font-size: 34rpx;
	color: #66645d;
}
.line {
	background: rgba(102, 100, 93, 0.5);
	width: 2rpx;
	height: 52rpx;
	position: absolute;
	left: 49.8%;
	top: 15rpx;
	z-index: 99;
}
.btnLeft {
	border-radius: 12rpx 0 0 12rpx;
}
.btnRight {
	border-radius: 0 12rpx 12rpx 0;
}
.list-item-time {
	display: flex;
	align-items: flex-start;
	margin-bottom: 12rpx;
	line-height: 40rpx;

	.imageClass {
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
		transform: translateY(4rpx);
	}
	.time-label {
		color: #66645d;
		line-height: 40rpx;
		flex-shrink: 0;
		margin-left: 12rpx;
	}
	.time {
		line-height: 40rpx;
	}
	&:last-child {
		margin-bottom: 0;
	}
}
.check {
	margin-right: 26rpx;
}
/deep/.uni-radio-input {
	margin: 0 !important;
}
.baseBtn {
	border-radius: 0 0 12rpx 12rpx;
	background-color: #f1f1f1;
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	width: 100%;
}

/deep/input {
	border: 2rpx solid rgba(151, 151, 151, 0.5) !important;
}

.hidden {
	visibility: hidden;
	position: relative;
	z-index: -1;
}
.infoButtonClick[disabled] {
	background-color: #f1f1f1 !important;
	color: #ccc !important;
}
.subTitle {
	margin: 0 40rpx;
	padding: 24rpx 0;
	font-size: 32rpx;
	color: rgba(102, 100, 93, 1);
	position: relative;
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: -12rpx;
		right: -12rpx;
		height: 2rpx;
		background-color: rgba(102, 100, 93, 0.1);
	}
}
.commentList {
	background: #fff;
	border-radius: 12rpx;
	margin: 24rpx 40rpx 0 40rpx;
	padding: 24rpx 20rpx;
	display: flex;
	.headImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		image {
			width: 100%;
			height: 100%;
			border-radius: 100%;
		}
	}
	.commentInfo {
		flex: 1;
		margin-left: 20rpx;
		.name {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 28rpx;
			text {
				font-size: 30rpx;
				color: #66645d;
				width: 300rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.img {
				display: flex;
				align-items: center;
				img {
					width: 30rpx;
					height: 28rpx;
					transform: translateY(-2rpx);
				}
				text {
					font-size: 24rpx;
					color: #b2b1ae;
					margin-left: 12rpx;
					width: 58rpx;
					display: inline-block;
				}
			}
		}
		.content {
			margin: 36rpx 0;
			font-size: 28rpx;
			color: #8a8c8d;
			line-height: 46rpx;
		}
		.chatList_img {
			margin-bottom: 24rpx;
			image {
				width: 154rpx;
				height: 154rpx;
				margin-right: 12rpx;
				margin-bottom: 12rpx;
				&:nth-child(3n) {
					margin-right: 0rpx;
				}
			}
			.uni-auto-image {
				margin-right: 12rpx;
				margin-bottom: 12rpx;
				&:nth-child(3n) {
					margin-right: 0rpx;
				}
			}
			margin-top: 24rpx;
		}
		.list {
			border-left: 1px solid rgba(138, 140, 141, 0.1);
			padding-left: 20rpx;
			margin-top: 24rpx;
			.listHead {
				display: flex;
				justify-content: space-between;
				.author {
					font-size: 30rpx;
					color: #66645d;
					max-width: 200rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.img {
					display: flex;
					align-items: center;
					img {
						width: 30rpx;
						height: 28rpx;
						transform: translateY(-2rpx);
					}
					text {
						font-size: 24rpx;
						color: #b2b1ae;
						margin-left: 12rpx;
						width: 58rpx;
						display: inline-block;
					}
				}
			}
			.commentContent {
				color: #b2b1ae;
				font-size: 28rpx;
				line-height: 40rpx;
				margin-top: 10rpx;
			}
		}
	}
}
/deep/.uni-radio-input-checked:before {
	font: unset !important;
	content: '' !important;
	font-size: 18px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-48%, -60%) scale(0.73) rotate(-45deg) !important;
	border-left: solid 2px #66645d;
	border-bottom: solid 2px #66645d;
	height: 8px;
	width: 12px;
}
</style>
